<!-- 课程卡片组件 -->
<template>
	<div class="courseCard">
		<el-dialog
		  title="百度前端技术学院"
		  :visible.sync="dialogVisible"
		  width="40%"
		  >
		  <span>未报名，请先报名(其实报不了，嘿嘿)</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">关 闭</el-button>
		  </span>
		</el-dialog>
		<div class="img-box"><a href="#/course" @click="dialogVisible = true" class="img"></a></div>
		<div class="infoBox">
			<a href="#/course" class="name" @click="dialogVisible = true">{{name}}</a>
			<div class="detail"><span><i class="el-icon-user"> {{teacher}}</i></span><span><i class="el-icon-notebook-1"> {{college}}</i></span></div>
			<p class="desc">{{desc}}</p>
		</div>
		<div class="data"><p class="data-item">难度：<span>{{level}}</span> 时间：<span>{{duration}}</span></p><p class="data-item">有<span class="number">{{situation[0]}}</span>人在学习该课程，有<span   class="number">{{situation[1]}}</span>人已经完成该课程</p></div>
	</div>
</template>

<script>
	export default{
		props:{
			name:String,
			teacher:String,
			college:String,
			level:String,
			desc:String,
			duration:String,
			skill:Array,
			situation:Array
		},
		data(){
			return {
				dialogVisible:false
			}
		},
		created() {
		}
	}
</script>

<style scoped="scoped">
	.courseCard p{
		margin: 0;
	}
	.courseCard{
		position: relative;
		width: 62%;
		padding: 15px;
		padding-right: 0;
		margin: 80px auto;
		box-shadow: 0 1px 4px 1px rgba(0,0,0,.08);
		height: 244px;
		background: #fff;
	}
	.infoBox{
		float: right;   
		padding: 22px 20px 0;
		width: 59%;
		box-sizing: border-box;
	}
	.infoBox .name{
		font-size: 20px;
		color: #262626;
		text-decoration: none;
	}
	.infoBox .detail{
		height: 20px;
		font-size: 14px;
		color: #38ba72;
		margin: 10px 0px;
	}
	.infoBox .detail span{
		line-height: 20px;
	}
	.infoBox .detail .el-icon-user:after{
		    display: inline-block;
		    content: '';
		    width: 1px;
		    height: 10px;
		    background-color: #ededed;
		    margin-left: 10px;
		    margin-right: 10px;
	}
	.infoBox .desc{
		    font-size: 12px;
		    display: -webkit-box;
		    -webkit-line-clamp: 5;
		    -webkit-box-orient: vertical;
		    overflow: hidden;
	}
	.img-box{
		position: relative;
		width: 40%;
		height: 182px;
		display: inline-block;
	}
	.courseCard .img{
		    position: absolute;
		    border: 1px solid #d2d2d2;
			width: 100%;
			height: 212px;
			left: 0;
			top: -30px;
			background: url(http://gss0.baidu.com/9rkZbzqaKgQUohGko9WTAnF6hhy/mms-res/fed/ife/ife_tutor/课程配图.3fb31f3e5af7e8d7.jpg) center center;
			background-repeat: no-repeat;
			background-size: cover;
	}
	.data{
		margin-top: 2px;
		font-size: 14px;
	}
	.data p span{
		color: #2D2D2D;
		opacity: .7;
	}
	.data .data-item{
		margin-bottom: 10px;
	}
	.number{
		color:#AE81DE !important;
	}
</style>
